<template>
	<view class="uni-navbar" :class="{ 'uni-navbar-fixed': isFixed, 'uni-navbar-shadow': hasShadow }" style="background: linear-gradient( 180deg, #5D64CA 0%, #6F9BDF 100%);;"
		:style="{height: navBarHeight + 'px' }">
		<uni-status-bar v-if="insertStatusBar"></uni-status-bar>
		<view class="uni-navbar-header" :style="{ color: color }">
			<view class="uni-navbar-header-btns left" @tap="onClickLeft">
				<!-- 改 -->
				<slot name="left" v-if="show">
					<view @click="goService">
						<image style="width: 40rpx;height: 40rpx;" src="../static/tab/homey.png" mode="scaleToFill" />
					</view>
				</slot>
				<view v-if="leftIcon || leftText" class="uni-navbar-btn-text"><i class="iconfont" :class="leftIcon"
						v-if="leftIcon"></i>{{ leftText || '' }}</view>
			</view>
			<block v-if="!onlyLeft">
				<view class="uni-navbar-container">
					<view v-if="title.length" class="uni-navbar-container-title">{{ title }}</view>
					<!-- 标题插槽 -->
					<slot name="left"></slot>
				</view>
				<view class="uni-navbar-header-btns right" @tap="onClickRight">
					<view v-if="rightText.length" class="uni-navbar-btn-text">{{ rightText }}</view>
					<slot name="right"></slot>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
import uniStatusBar from '@/components/uni-status-bar.vue';
export default {
	components: {
		uniStatusBar
	},
	props: {
		/**
		 * 标题文字
		 */
		title: {
			type: String,
			default: ''
		},
		/**
		 * 左侧按钮图标
		 */
		leftIcon: {
			type: String,
			default: ''
		},
		/**
		 * 左侧按钮文本
		 */
		leftText: {
			type: String,
			default: ''
		},
		/**
		 * 右侧按钮文本
		 */
		rightText: {
			type: String,
			default: ''
		},
		/**
		 * 是否固定在顶部
		 */
		fixed: {
			type: [Boolean, String],
			default: false
		},
		/**
		 * 按钮图标和文字颜色
		 */
		color: {
			type: String,
			default: '#000000'
		},
		/**
		 * 背景颜色
		 */
		backgroundColor: {
			type: String,
			default: '#FFFFFF'
		},
		/**
		 * 是否仅有左侧
		 */
		onlyLeft: {
			type: [Boolean],
			default: false
		},
		/**
		 * 是否包含状态栏，默认固定在顶部时包含
		 */
		statusBar: {
			type: [Boolean, String],
			default: ''
		},
		/**
		 * 是否使用阴影，默认根据背景色判断
		 */
		shadow: {
			type: Boolean,
			default() {
				return false
			}
		},
	},
	computed: {
		isFixed() {
			return String(this.fixed) === 'true'
		},
		insertStatusBar() {
			switch (String(this.statusBar)) {
				case 'true':
					return true
				case 'false':
					return false
				default:
					return this.isFixed
			}
		},
		hasShadow() {
			var backgroundColor = this.backgroundColor
			switch (this.shadow) {
				case true:
					return true
				case false:
					return false
				default:
					return backgroundColor !== 'transparent' && backgroundColor.indexOf('rgba') < 0
			}
		}
	},
	data() {
		return {
			navBarHeight: uni.getSystemInfoSync().statusBarHeight * 1 + 44,
			show: true
		}
	},
	created() {
		if (this.title == '首页') {
			this.show = false
		}
	},
	methods: {
		/**
		 * 左侧按钮点击事件
		 */
		onClickLeft() {
			let {
				leftIcon = ''
			} = this
			if (leftIcon == 'icon-left') {
				this.$util.goUrl({
					url: 1,
					openType: `navigateBack`
				})
			} else if (leftIcon == 'iconshouye11') {
				this.$util.goUrl({
					url: `/pages/service`,
					openType: 'reLaunch'
				})
			} else {
				this.$emit('clickLeft')
				this.$emit('click-left')
			}
		},
		/**
		 * 右侧按钮点击事件
		 */
		onClickRight() {
			this.$emit('clickRight')
			this.$emit('click-right')
		},
		// 点击图标跳转首页
		goService() {
			this.$util.goUrl({
				url: `/pages/service`
			})
		}
	}
}
</script>

<style lang="scss">
.uni-navbar {
	display: block;
	position: relative;
	width: 100%;
	/* background-color: #FFFFFF; */
	overflow: hidden;
}

.uni-navbar-shadow {
	box-shadow: 0 1px 6px #ccc;
}

.uni-navbar.uni-navbar-fixed {
	position: fixed;
	z-index: 9999;
}

.uni-navbar-header {
	display: flex;
	flex-direction: row;
	width: 100%;
	/* #ifdef MP-BAIDU */
	height: 38px;
	line-height: 38px;
	font-size: 15px;
	/* #endif */
	/* #ifndef MP-BAIDU */
	height: 44px;
	line-height: 44px;
	font-size: 16px;
	/* #endif */
}

.uni-navbar-header-btns {
	display: inline-flex;
	flex-wrap: nowrap;
	flex-shrink: 0;
	width: 100px;
}

.uni-navbar-header-btns.left {
	padding-left: 30rpx;
	display: flex;
	align-items: center;

	.iconfont {
		font-size: 36rpx;
	}
}

.uni-navbar-header-btns.right {
	padding-right: 30rpx;
}

.uni-navbar-container {
	width: 100%;
	margin: 0 5px;
}

.uni-navbar-container-title {
	/* #ifdef MP-BAIDU */
	height: 38px;
	line-height: 38px;
	/* #endif */
	/* #ifndef MP-BAIDU */
	height: 44px;
	line-height: 44px;
	/* #endif */
	font-size: 15px;
	text-align: center;
	/* #ifndef H5 */
	padding-right: 30px;
	/* #endif */
	max-width: 360rpx;
}
</style>